<template>
  <div class="login_bg">
    <div style="height: 10rem"></div>
    <div class="input_bg">
      <van-cell-group>
        <van-field
          v-model="mobile"
          label="手机号"
          type="tel"
          placeholder="请输入手机号"
        />
        <van-field
          v-model="password"
          label="密码"
          type="password"
          placeholder="请输入手机号"
        />
        <!-- <van-field
            v-model="sms"
            center
            clearable
            label="验证码"
            placeholder="请输入验证码"
        >
          <template #button>
            <van-button size="small" type="primary" class="yzmBtn" @click="yzmClick" :disabled="disBool">
              <template v-if="!smsBool">
                {{ smsBtn }}
              </template>
              <van-count-down v-show="smsBool"
                              ref="countDown"
                              millisecond
                              :time="30000"
                              :auto-start="false"
                              format="ss"
                              @finish="finish"
              />
            </van-button>
          </template>
        </van-field> -->
      </van-cell-group>
      <van-button
        color="linear-gradient(to right, #ff6034, #ee0a24)"
        class="btn_color"
        @click="login"
      >
        登录
      </van-button>
    </div>
  </div>
</template>

<script>
import { userSms, userLogin } from "@/api/login"

export default {
  name: "login",
  data() {
    return {
      mobile: "",
      sms: "",
      password: "",
      smsBtn: "验证码",
      smsBool: false,
      disBool: false,
    }
  },
  methods: {
    yzmClick() {
      if (this.mobile) {
        this.smsBool = true
        this.disBool = true
        this.$refs.countDown.start()
        var formData = new FormData()
        formData.append("mobile", this.mobile)
        userSms(formData)
      } else {
        this.$notify({ type: "warning", message: "请填写手机号" })
      }
    },
    finish() {
      this.smsBool = false
      this.smsBtn = "再试一次"
      this.disBool = false
      this.$refs.countDown.reset()
    },
    login() {
      if (this.mobile == "" && this.password == "")
        return this.$notify({ type: "warning", message: "请补齐信息" })
      var formData = new FormData()
      formData.append("mobile", this.mobile)
      formData.append("password", this.password)
      userLogin(formData)
        .then((res) => {
          this.$store.dispatch("setUserInfo", res)
          this.$store.dispatch("userLogin", true)
          this.$router.push("/")
        })
        .catch((error) => {
          this.$notify({ type: "warning", message: error.message })
        })
    },
  },
}
</script>

<style scoped lang="scss">
.login_bg {
  height: 100%;
  width: 100%;
  background: url("../assets/奖杯.png") no-repeat center;
  background-size: 100% 100%;

  .input_bg {
    width: 80%;
    margin: 0 auto;
    padding: 2rem 1rem;
    background-color: white;
    border-radius: 10px;

    /deep/ .van-field__label,
    /deep/ .van-field__control {
      font-size: 0.9rem;
    }

    /deep/ .van-field__control {
      &::placeholder {
        font-size: 0.9rem;
      }
    }

    .yzmBtn {
      font-size: 0.7rem;
      width: 5rem;
      height: 2rem;
    }

    .btn_color {
      border-radius: 5px;
      width: 7rem;
      height: 2rem;
      font-size: 0.5rem;
      margin: 2rem 1rem 0 1rem;
    }
  }
}
</style>